<template>
  <div>
    <!-- Card 卡片组件。将信息聚合在卡片容器中展示。 -->
    <el-card class="box-card">
      <CategorySelectorView @getCategoryId="getCategoryId" />
    </el-card>
    <!-- Card 卡片组件。将信息聚合在卡片容器中展示。 -->
    <el-card class="box-card">
      <!-- A Page -->
      <div v-show="scene === 0">
        <!-- Button 按钮组件。常用的操作按钮。 -->
        <el-row style="margin-bottom: 16px">
          <el-button type="primary" icon="el-icon-plus" :disabled="!category3Id" @click="addSpuInfo()">新增</el-button>
        </el-row>
        <!-- Table 表格组件。用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。 -->
        <el-table style="width: 100%; margin-bottom: 16px" border :data="records">
          <el-table-column type="index" label="序号" width="50" align="center" />
          <el-table-column prop="spuName" label="SPU名称" width="width" />
          <el-table-column prop="description" label="SPU描述" width="width" />
          <el-table-column prop="prop" label="操作" width="width">
            <!-- Vue 组件：Slot 作用域插槽。 -->
            <template slot-scope="{row}">
              <!-- Button 按钮组件。常用的操作按钮。 -->
              <el-button type="primary" icon="el-icon-info" size="mini" @click="handler(row)">详情</el-button>
              <el-button type="primary" icon="el-icon-plus" size="mini" @click="addSkuGoods(row)">新增</el-button>
              <el-button type="primary" icon="el-icon-edit" size="mini" @click="updSpuInfo(row)">编辑</el-button>
              <!-- PopConfirm 气泡确认框组件。点击元素，弹出气泡确认框。旧版本事件：@onConfirm="delSpuInfo(row)"，新版本事件：@confirm="delSpuInfo(row)" -->
              <el-popconfirm title="这是一段内容确定删除吗？" style="margin-left: 10px" @onConfirm="delSpuInfo(row)">
                <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini">删除</el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <!-- Pagination 分页组件。当数据量过多时，使用分页分解数据。 -->
        <!--
          layout    属性，表示需要显示的内容，用逗号分隔，布局元素会依次显示。
          prev      属性，表示上一页，
          next      属性，表示下一页，
          pager     属性，表示页码列表，
          jumper    属性，表示跳页元素，
          total     属性，表示总条目数，
          sizes     属性，用于设置每页显示的页码数量。
          提示：除此以外还提供了jumper和total，sizes和特殊的布局符号->，->后的元素会靠右显示。
        -->
        <el-pagination
          style="text-align: center"
          background
          :total="total"
          :current-page="page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="limit"
          layout="prev, pager, next, jumper, ->, total, sizes"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <!-- B Page -->
      <SpuFormView v-show="scene === 1" ref="spu" @changeSceneSpu="changeSceneSpu" />
      <!-- C Page -->
      <SkuFormView v-show="scene === 2" ref="sku" @changeSceneSku="changeSceneSku" />
    </el-card>
    <!-- Dialog 对话框组件。在保留当前页面状态的情况下，告知用户并承载相关操作。 -->
    <el-dialog :title="`${spu.spuName}的详情列表`" :visible.sync="dialogTableVisible" width="30%" :before-close="handleClose">
      <el-table v-loading="loading" :data="skuList" style="width: 100%">
        <el-table-column prop="skuName" label="名称" width="width" />
        <el-table-column prop="price" label="价格" width="width" />
        <el-table-column prop="weight" label="重量" width="width" />
        <el-table-column label="默认图片" width="width">
          <template slot-scope="{row}">
            <img :src="row.skuDefaultImg" alt="" style="width: 100px">
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import CategorySelectorView from '@/components/CategorySelector/CategorySelectorView.vue'
import SpuFormView from '@/views/product/spu/form2/SpuFormView.vue'
import SkuFormView from '@/views/product/spu/form1/SkuFormView.vue'

export default {
  name: 'SpuView',
  components: {
    SkuFormView,
    SpuFormView,
    CategorySelectorView
  },
  data() {
    return {
      // 初始化分页查询参数
      page: 1,
      limit: 5,
      // 响应数据总条数和列表
      total: 0,
      records: [],
      // 分类ID
      category1Id: '',
      category2Id: '',
      category3Id: '',
      // 切换列表与添加
      scene: 0,
      // 控制对话框的显示与隐藏
      dialogTableVisible: false,
      spu: {
        spuName: 'string'
      },
      skuList: [],
      // Loading 加载组件。加载数据时显示动效：<el-table v-loading="loading"></el-table>
      loading: true
    }
  },
  mounted() {
    this.getSpuList()
  },
  methods: {
    // 子组件向父组件传递，通过$emit事件通信。对象参数{ categoryId, level }
    // 父组件获取子组件传递参数通过解构对象{ categoryId, level }
    getCategoryId({ categoryId, level }) {
      if (level === 1) {
        this.category1Id = categoryId
        this.category2Id = ''
        this.category3Id = ''
      } else if (level === 2) {
        this.category2Id = categoryId
        this.category3Id = ''
      } else {
        this.category3Id = categoryId
        this.getSpuList()
      }
    },
    // 初始化数据列表
    async getSpuList() {
      const { page, limit, category3Id } = this
      const result = await this.$API.spu.reqSpuList(page, limit, category3Id)
      if (result.code === 200) {
        this.total = result.data.total
        this.records = result.data.records
      }
    },
    // 当前第几页
    handleCurrentChange(val) {
      console.log(`当前第 ${val} 页`)
      this.page = val
      this.getSpuList()
    },
    // 每页多少条
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.limit = val
      this.getSpuList()
    },
    // 切换到【B Page】页面
    addSpuInfo() {
      this.scene = 1
      // 在父组件中可以通过$refs传递给子组件通讯：ref="spu"
      this.$refs.spu.addSpuData(this.category3Id)
    },
    updSpuInfo(row) {
      this.scene = 1
      // 在父组件中可以通过$refs传递给子组件通讯：ref="spu"
      this.$refs.spu.initSpuData(row)
    },
    async delSpuInfo(row) {
      const result = await this.$API.spu.reqDeleteSpu(row.id)
      if (result.code === 200) {
        this.$message({ type: 'success', message: '删除成功' })
        await this.getSpuList(this.records.length > 1 ? this.page : this.page - 1)
      }
    },
    // 子组件自定义事件传递给父组件，通过解构对象{ scene: 0, flag: this.spu.id ? '修改' : '添加' }
    changeSceneSpu({ scene, flag }) {
      this.scene = scene
      if (flag === '修改') {
        this.getSpuList(this.page)
      } else if (flag === '取消') {
        this.getSpuList(this.page)
      } else {
        this.getSpuList()
      }
    },
    // 切换到【C Page】页面
    addSkuGoods(row) {
      this.scene = 2
      this.$refs.sku.getData(this.category1Id, this.category2Id, row)
    },
    // 子组件自定义事件传递给父组件，
    changeSceneSku({ scene, flag }) {
      this.scene = scene
      if (flag === '修改') {
        this.getSpuList(this.page)
      } else if (flag === '取消') {
        this.getSpuList(this.page)
      } else {
        this.getSpuList()
      }
    },
    // 查看详情接口API
    async handler(row) {
      this.dialogTableVisible = true
      this.spu = row
      const result = await this.$API.spu.reqSkuList(row.id)
      if (result.code === 200) {
        this.skuList = result.data
        this.loading = false
      }
    },
    // Dialog 对话框组件。关闭事件
    handleClose(done) {
      this.loading = true
      this.skuList = []
      done()
    }
  }
}
</script>

<style scoped>

</style>

